<template>
  <el-drawer v-model="dialogVisible" title="个人信息" size="500px" :destroy-on-close="true">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px" label-suffix="：">
      <!-- <el-form-item label="头像" prop="avatar">
        <el-upload class="avatar-uploader" action="#" :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
          <el-icon v-else><Plus /></el-icon>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="管理员头像" prop="avatar">
        <UploadImg v-model:image-url="formData.avatar" width="135px" height="135px" :file-size="3">
          <template #empty>
            <el-icon><Avatar /></el-icon>
            <span>请上传头像</span>
          </template>
          <template #tip> 头像大小不能超过 3M </template>
        </UploadImg>
      </el-form-item>
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="formData.nickName" placeholder="请输入用户名" />
      </el-form-item>

      <el-form-item label="性别" prop="gander">
        <el-select v-model="formData.gender" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>

      <el-form-item label="身份" prop="isSuper">
        <el-input :value="formData.isSuper === 1 ? '超级管理员' : '普通用户'" disabled />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入邮箱" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { useInfoStore } from "@/stores/modules/info";
import { useUserStore } from "@/stores/modules/admin";
import UploadImg from "@/components/Upload/Img.vue";
import { putAdminInfo } from "@/api/modules/admin";
const infoStore = useInfoStore();
const userStore = useUserStore();
const dialogVisible = ref(false);
const formRef = ref<FormInstance>();

const formData = reactive({ ...infoStore.userInfo, isSuper: useUserStore().isSuper });

const rules = {
  nickName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }]
};

// 打开弹窗时同步数据
const openDialog = () => {
  Object.assign(formData, infoStore.userInfo); // 同步最新用户数据
  dialogVisible.value = true;
};

// 模拟头像上传成功
const handleAvatarSuccess = (_response: any, file: any) => {
  formData.avatar = URL.createObjectURL(file.raw);
};
onMounted(() => {
  console.log("当前 userInfo 数据为：", infoStore.userInfo);
});
// 提交保存
const submitForm = () => {
  formRef.value?.validate(async valid => {
    if (!valid) return;
    const parmas = {
      nickname: formData.nickName,
      avatar: formData.avatar,
      email: formData.email,
      gender: formData.gender
    };
    console.log("adminInfo", parmas);
    await putAdminInfo(parmas);
    infoStore.setInfo({ ...formData });
    // 模拟提交保存
    // infoStore.setUserInfo({ ...formData });
    ElMessage.success("信息保存成功！");
    dialogVisible.value = false;
  });
};

defineExpose({
  openDialog
});
</script>

<style scoped>
.avatar-uploader {
  display: inline-block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
